import React from 'react'
import { Select } from 'antd';
const { Option } = Select;

function Algorithm (props) {
  const { seqAlgorithm, algorithmData, setSeqAlgorithm } = props
  React.useEffect(() => {

  }, [seqAlgorithm])
  const onChange = (value) => {
    setSeqAlgorithm(value)
  }
  return (
    <div>
      <div style={{ textAlign: 'left', width: '100%' }}>
        <Select
          onChange={onChange}
          value={seqAlgorithm}
          allowClear
          defaultActiveFirstOption
          style={{
            width: '100%', backgroundColor: props.darkMode ? '#30404d' : '#fff',
            color: props.darkMode ? '#afb6bc' : '#444'
          }}
          placeholder="please choose algorithms method">
          {
            algorithmData.length ?
              algorithmData.map((e, i) =>
                <Option style={{
                  background: props.darkMode ? '#30404d' : '#fff',
                  color: props.darkMode ? '#afb6bc' : '#444'
                }}
                  key={i}
                  value={e.code}>{e.name}
                </Option>)
              : null
          }
        </Select>
        <p style={{ color: props.darkMode ? '#afb6bc' : '#999', fontSize: '14px' }}>Choose a sequence alignment method</p>
      </div>
    </div>
  )
}

export default Algorithm;